<template>
  <div>
    <a-form-model ref="di_rel_dept_correctForm" :model="di_user" :rules="rules">
      <a-form-model-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="组织机构"
        prop="admunitid">
        <a-row v-if="admunit">
          <a-col :span="24" style="padding-right: 16px;">
            {{ admunit.name }}
          </a-col>
        </a-row>
      </a-form-model-item>
      <div v-if="isEdit">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="姓名"
          prop="username">
          <a-row v-if="di_user">
            <a-col :span="18" style="padding-right: 16px;">
              {{ di_user.username }}
            </a-col>
          </a-row>
        </a-form-model-item>
      </div>

      <a-form-model-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="用户电话"
        has-feedback
        prop="mobile"
        required>
        <a-row>
          <a-col :span="18" style="padding-right: 16px;">
            <a-input
              allow-clear
              v-model="di_user.mobile"
              :maxLength="50"
              placeholder="请输入用户电话"
              @change="mobileInputChange()"
            />
          </a-col>
          <a-col  :span="6" style="padding-left: 1px;">
            <a-button
              icon="search"
              type="primary"
              @click="searchUser(di_user.mobile)"
            >查询
            </a-button>
          </a-col>
        </a-row>
      </a-form-model-item>
      <div  v-if="showSearchUser">
       <a-form-model-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="人员信息">
        姓名：{{this.userList[0].userName}} <a-divider type="vertical"></a-divider> 级别：{{this.userList[0].careerRankText}}
       </a-form-model-item>
      </div>
      <a-form-model-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="关联用户邮寄地址"
        prop="address"
        has-feedback
        required>
        <a-row>
          <a-col :span="24" style="padding-right: 16px;">
            <a-input
              allow-clear
              v-model="di_user.address"
              :maxLength="150"
              placeholder="请输入邮寄地址" />
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item>
        <div style="text-align: center">
          <a-input type="hidden" :disabled="true" v-model="di_user.id" />
          <a-button :style="{ marginRight: '8px' }" icon="close" @click="onClose"> 关闭</a-button>
          <a-button type="primary" @click="onSubmit" icon="save"> 保存</a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { queryUserByMobile } from '@/api/ding/di_rel_dept_correct'
import { checkSave } from '@/api/std/std_admuser'

const ucolumns = [
  {
    title: '姓名',
    dataIndex: 'userName',
    key: 'userName',
    align: 'left',
    width: 150
  },
  {
    title: '电话',
    dataIndex: 'mobile',
    key: 'mobile',
    align: 'left',
    width: 150
  },
  {
    title: '岗位级别',
    dataIndex: 'careerRankText',
    key: 'careerRankText',
    align: 'left',
    width: 250
  }
]
export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {
  },
  data () {
    // 这里存放数据
    return {
      id:'', //被修改的id
      labelCol: { span: 6 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      di_user: {
        id: '',
        orgname: '',
        fid: '',
        adid: '',
        mobile: '',
        address: '',
        contactuser: '',
        orgtype: ''
      }, // 角色信息
      userList: [],
      ucolumns: ucolumns,
      admunit: {},
      rules: {
        mobile: [{ required: true, validator: this.checkMobile }],
        address: [{ required: true, message: '请输入邮寄地址', trigger: 'blur' }]
      },
      showSearchUser:false, //是否显示查询结果
      isEdit:false //是否是修改操作
    }
  },
  computed: {},
  watch: {
    admunit: {
      handler (newValue, oldVal) {
        this.admunit = newValue
      },
      deep: true // 深度监听
    },
    di_user:{
      handler (newValue, oldVal) {
        this.di_user = newValue
      },
      deep: true // 深度监听
    }
  },
  // 方法集合
  methods: {
    checkMobile (rule, value, callback) {
      if (!value) {
        callback(new Error('请输入联系号码'))
      }
      if (value && !/^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/.test(value)) {
        callback(new Error('请输入正确的联系号码'))
      }
      callback()
    },
    onClose () {
      this.$emit('close')
    },
    searchUser (phone) {
      queryUserByMobile(phone).then((res) => {
            this.userList = []
            this.userList = res.data
            if(this.userList && this.userList.length==0){
              this.$message.error("未查询到用户")
              this.showSearchUser = false
            }else {
              this.showSearchUser = true
            }
          })
    },
    onSubmit () {
      if(this.isEdit){
        this.$refs.di_rel_dept_correctForm.validate((valid) => {
          this.loading = true
          if (valid) {
            checkSave({ id:this.id,mobile: this.di_user.mobile, admunitid: this.admunit.id, address: this.di_user.address }).then((res) => {
              if (res.code === 0) {
                this.$message.success('修改成功')
                this.onClose()
              } else {
                this.$message.error('修改失败')
              }
            }).finally(() => {
              this.loading = false
            })
          } else {
            this.loading = false
          }
        })
      }else {
        this.$refs.di_rel_dept_correctForm.validate((valid) => {
          this.loading = true
          if (valid) {
            checkSave({ mobile: this.di_user.mobile, admunitid: this.admunit.id, address: this.di_user.address }).then((res) => {
              if (res.code === 0) {
                this.$message.success('保存成功')
                this.onClose()
              } else {
                this.$message.error('保存失败')
              }
            }).finally(() => {
              this.loading = false
            })
          } else {
            this.loading = false
          }
        })
      }
    },
    refreshNode (node) {
      if(node.userid  && node.userid.length>0){
        //修改操作node{userid,username,address,orgname}
        this.admunit.name = node.orgname
        this.di_user.id = node.userid
        this.di_user.mobile = node.mobile
        this.di_user.username = node.username
        this.di_user.address = node.address
        this.id = node.id
        this.isEdit = true
      }else {
        //添加
        this.admunit = node
        // 包含 （id name typeid）
      }
    },
    //手机输入框变化
    mobileInputChange(){
      this.showSearchUser = false
      if(this.di_user.mobile.length == 11){
        this.searchUser(this.di_user.mobile)
      }
    }

  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created () {
  }
}
</script>
